/**
 * 测试组件，原本打算自己写一个对话框组件，但是遇到了一些问题无法解决。可以续写，可以删除
 */
import React, { Component } from 'react';
import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import Button from '@material-ui/core/Button';
class MyDialog extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            title:this.props.title,
            prompt:this.props.prompt,//提示信息
            textFields:this.props.textFields||[],//一个对象数组，键：label,onChange
            buttons:this.props.buttons||[],//一个对象数组,键：text,onClick
            onClose:this.props.onClose,//关闭对话框的回调函数
            open:this.props.open,//对话框的开启状态
         };
    }
    /**
     * 刷新状态
     */
    refresh = ()=>{
        this.setState({ 
            title:this.props.title,
            prompt:this.props.prompt,//提示信息
            textFields:this.props.textFields||[],//一个对象数组，键：label,onChange
            buttons:this.props.buttons||[],//一个对象数组,键：text,onClick
            onClose:this.props.onClose,//关闭对话框的回调函数
            open:this.props.open,//对话框的开启状态
         });
    }

    openDialog =()=>{
        this.setState({
            open:true
        });
    }

    closeDialog=()=>{
        this.setState({
            open:false
        });
    }


    render() { 
        return ( 
            <Dialog open={this.state.open} onClose={this.state.onClose} aria-labelledby="form-dialog-title">
                    <DialogTitle id="form-dialog-title">{this.state.title}</DialogTitle>
                    <DialogContent>
                        <DialogContentText>
                            {this.state.prompt}
                        </DialogContentText>
                        {
                            //按钮
                            this.state.textFields.map(
                                (textField,index)=>
                                <TextField
                                    autoFocus
                                    margin="dense"
                                    id="name"
                                    label={textField.label}
                                    type="text"
                                    fullWidth
                                    onChange={textField.onChange}
                                    key={index}
                                />
                            )
                        }
                    </DialogContent>
                    <DialogActions>
                        {
                            //按钮
                            this.state.buttons.map(
                                (btn,index)=><Button key={index} onClick={btn.onClick} color="primary">{btn.text}</Button>
                            )
                        }
                    </DialogActions>
                </Dialog>
         );
    }
}
 
export default MyDialog;